<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/theme-chalk_index.css">
    <script src="js/vue@2_dist_vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-ui@2.15.14_lib_index.js"></script>
</head>
<body>

<div id="app">
    <div style="width: 70%;">
        <el-form :inline="true" :model="queryForm">
            <el-form-item label="昵称">
                <el-input v-model="queryForm.realName" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select clearable v-model="queryForm.roleId" placeholder="角色">
                    <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="userList"
                border
                stripe
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="birthday"
                    label="生日"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="昵称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="roleId"
                    label="角色"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="account"
                    label="账号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" @click="handleDel(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                layout="prev, pager, next"
                :page-size="queryForm.pageSize"
                :current-page="queryForm.pageNo"
                :total="total"
                @current-change="changePage">
        </el-pagination>
    </div>
    <div style="width: 600px;">
        <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="user.realName"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker type="date" value-format="yyyy.MM.dd" placeholder="选择生日"
                                v-model="user.birthday"></el-date-picker>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="user.roleId" placeholder="请选择角色">
                    <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">添加</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: {},
            userList: [],
            roleList: [],
            queryForm: {
                realName: undefined,
                roleId: undefined,
                pageSize: 5,
                pageNo: 1,
            },
            total: 0,
        },
        // 页面加载时
        created() {
            this.initPage();
        },

        methods: {
            initPage() {
                // 初始用户列表
                this.getPage()
                // 初始角色列表
                this.getRoles();
            },
            getRoles() {
                axios.get('http://localhost:8080/ssm_01_war_exploded/roles/getAll')
                    .then(response => this.roleList = response.data)
            },
            getPage() {
                axios.get('http://localhost:8080/ssm_01_war_exploded/users/list2', {params: this.queryForm})
                    .then(response => {
                        let page = response.data;
                        this.userList = page.list
                        this.total = page.total
                        this.queryForm.pageNo = page.pageNo
                    })
            },
            submitForm() {
                axios.post('http://localhost:8080/ssm_01_war_exploded/users/add2', this.user)
                    .then(resp => {
                        if (resp) {
                            this.$message.success('添加成功');
                            this.getPage();
                            this.user = {};
                        } else {
                            this.$message.error('添加失败');
                        }
                    })
            },
            changePage(pageNo) {
                this.queryForm.pageNo = pageNo;
                this.getPage();
            },
            onQuery() {
                this.getPage();
            },
            handleDel(user) {
                this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {type: 'warning'})
                    .then(() => {
                        axios.get('http://localhost:8080/ssm_01_war_exploded/users/ajaxDel?id=' + user.id)
                            .then(resp => {
                                if (resp) {
                                    this.$message.success('删除成功');
                                    this.getPage();
                                } else {
                                    this.$message.error('删除失败');
                                }
                            })
                    })

            }
        }
    })
</script>
</body>
</html>